<template>
	<view class="menu-wrap" :class="{'small':small}">
		<view class="title" v-if="title">{{title}}</view>
		<uni-grid :column="column" :showBorder="false" :square="false" @change="onChange">
			<uni-grid-item v-for="(item, index) in getMenus" :key="index" :index="index">
				<view class="menu-item" :style="{'height':rowHeight + 'px'}">
					<image class="icon" :src="item.icon" />
					<text class="text">{{ item.label }}</text>
				</view>
			</uni-grid-item>
		</uni-grid>
	</view>
</template>

<script>
import store from '@/store';
export default {
	props:{
		column:{
			type:Number,
			default:function(){
				return 3
			}
		},
		small:{
			type:Boolean,
			default:function(){
				return false
			}
		},
		title:{
			type:String,
			default:function(){
				return ''
			}
		},
		rowHeight:{
			type:Number | String,
			default:function(){
				return 'auto'
			}
		}
	},
	data() {
		return {
			menus: [
				{ judgeIsLogin: true,label: '在线报名', icon: require('@/static/icon/menu/big-01.png'), path: '/signUp' },
				{ judgeIsLogin: false,label: '动态资讯', icon: require('@/static/icon/menu/big-02.png'), path: '' },
				{ judgeIsLogin: false,label: '关于拓为', icon: require('@/static/icon/menu/big-03.png'), path: '' }
			],
			smallMenus: [
				{ judgeIsLogin: false,label: '精品全班课', icon: require('@/static/icon/menu/mianshou/1.png'), path: '' },
				{ judgeIsLogin: false,label: 'VIP集训班', icon: require('@/static/icon/menu/mianshou/2.png'), path: '' },
				{ judgeIsLogin: false,label: 'VIP协议班', icon: require('@/static/icon/menu/mianshou/2.png'), path: '' },
				{ judgeIsLogin: false,label: '高端集训班', icon: require('@/static/icon/menu/mianshou/3.png'), path: '' },
				{ judgeIsLogin: false,label: '高端协议班', icon: require('@/static/icon/menu/mianshou/3.png'), path: '' },
				{ judgeIsLogin: false,label: '全部班型', icon: require('@/static/icon/menu/mianshou/4.png'), path: '' },
			]
		};
	},
	computed: {
		getMenus(){
			return this.small ? this.smallMenus : this.menus
		}
		
	},
	methods: {
		// 宫格点击
		onChange(e) {
			let index = e.detail.index;
			let item = this.small ? this.smallMenus[index] : this.menus[index];
			console.log(index, item);
			
			/**
			 * 根据 item.judgeIsLogin 参数判断
			 * 当前模块是否需要用户登录
			 */
			if( item.judgeIsLogin ){
				let storeUserInfo = store.state.userInfo;
				if (!storeUserInfo.token) { // nvue页面读取不到vuex里面数据，将取缓存
					storeUserInfo = uni.getStorageInfoSync("userInfo");
				}
				
				let token = storeUserInfo.token;
				if(token) {
					// 校验token是否有效 无效清理本地数据，需重新登录
					this.$api.login.check_wx_token({ token }).then((res) => {
						if(res.code !== 200) {
							//window.sessionStorage.clear();
							uni.clearStorageSync();
							//console.log(token)
							this.judgeLogin(()=>{
								this.toPage(item)
							}, null)
							console.log('登录信息校验失败')
						} else {
							//console.log(token)
							this.judgeLogin(()=>{
								this.toPage(item)
							}, storeUserInfo)
							console.log('登录信息校验成功')
						}
					}).catch(err => {
						//window.sessionStorage.clear();
						uni.clearStorageSync();
						//console.log(token)
						this.judgeLogin(()=>{
							this.toPage(item)
						}, null)
						console.log('登录信息校验失败', err)
					})
				} else {
					this.judgeLogin(()=>{
						this.toPage(item)
					}, null)
				}
			}else{
				this.toPage(item)
			}
			
		},
		toPage(item){
			uni.showToast({
				icon: 'none',
				title: `跳转${item.label}`
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.menu-wrap {
	width: 686upx;
	margin: 16upx auto;
	text-align: center;
	.title{
		margin: 16upx 0;
		font-size: $uni-font-size-base;
	}
	.menu-item {
		text-align: center;
		font-size: $uni-font-size-base;
		color: $uni-text-color;
		.icon {
			width: 88upx;
			height: 88upx;
			display: block;
			margin: 0 auto;
		}
	}
}
.menu-wrap.small{
	.menu-item {
		padding-top: 32upx;
	}
	.text{
		display: block;
		margin-top: 16upx;
	}
}
</style>
